<template>
  <div class="searchContent">
    <div class="title">综合档案</div>
    <div class="goToUrl">
      <div class="operation" @click="operation">
        <a-icon type="left" />
        <span>手术详情</span>
      </div>
      <div class="returnPrevious" @click="returnToPrevious">
        <a-icon type="left" />
        <span>返回</span>
      </div>
    </div>
    <div :class="tab">
      <a-radio-group :value="size" @change="handleSizeChange">
        <a-radio-button
          style="width:94px;height:36px;border-radius: 10px 0px 0px 10px;"
          value="HIS"
        >HIS</a-radio-button>
        <a-radio-button class="bor" style="width:94px;height:36px;" value="LIS">LIS</a-radio-button>
        <a-radio-button class="bor" style="width:94px;height:36px;" value="PACS">PACS</a-radio-button>
        <a-radio-button class="bor" style="width:94px;height:36px;" value="pathology">病理</a-radio-button>
        <a-radio-button class="bor" style="width:94px;height:36px;" value="advice">医嘱</a-radio-button>
        <a-radio-button class="bor" style="width:94px;height:36px;" value="EMR">EMR</a-radio-button>
        <a-radio-button
          class="bor"
          style="width:140px;height:36px;border-radius: 0px 10px 10px 0px;"
          value="synMessage"
        >综合档案信息</a-radio-button>
      </a-radio-group>
    </div>
    <HIS v-if="HISshow" :filter="filter"></HIS>
    <LIS v-if="LISshow" :filter="filter"></LIS>
    <PACS v-if="PACSshow"></PACS>
    <pathology v-if="pathologyshow" :filter="filter"></pathology>
    <advice v-if="adviceshow" :filter="filter"></advice>
    <EMR v-if="EMRshow" :filter="filter"></EMR>
    <synMessage v-if="synMessageshow" :filter="filter"></synMessage>
  </div>
</template>

<script>
import HIS from "./components/HIS.vue";
import LIS from "./components/LIS.vue";
import PACS from "./components/PACS.vue";
import pathology from "./components/pathology.vue";
import advice from "./components/advice.vue";
import EMR from "./components/EMR.vue";
import synMessage from "./components/synMessage.vue";
export default {
  components: {
    HIS,
    LIS,
    PACS,
    pathology,
    advice,
    EMR,
    synMessage
  },
  data() {
    return {
      size: "HIS",
      HISshow: false,
      LISshow: false,
      PACSshow: false,
      pathologyshow: false,
      adviceshow: false,
      EMRshow: false,
      synMessageshow: false,
      filter: "",
      tab: "tab"
    };
  },
  created() {
    this.filter = this.$router.currentRoute.query.filter;
  },
  mounted() {
    let _this = this;
    if (this.size == "HIS") {
      this.HISshow = true;
    } else {
      this.HISshow = false;
    }
    window.Event.$on("menuLeft", val => {
      _this.menuLeft = val;
      if (_this.menuLeft != "menuDeaDolour") {
        _this.tab = "tab";
      } else if (_this.menuLeft == "menuDeaDolour") {
        _this.tab = "tab1";
      }
    });
    // _this.menuLeft1 = _this.$store.state.menuLeft;
    _this.menuLeft1 = sessionStorage.getItem("menuLeft");
    if (_this.menuLeft1 != "menuDeaDolour") {
      _this.tab = "tab";
    } else if (_this.menuLeft1 == "menuDeaDolour") {
      _this.tab = "tab1";
    }
  },
  methods: {
    handleSizeChange(e) {
      this.size = e.target.value;
      if (this.size == "HIS") {
        this.HISshow = true;
      } else {
        this.HISshow = false;
      }
      if (this.size == "LIS") {
        this.LISshow = true;
      } else {
        this.LISshow = false;
      }
      if (this.size == "PACS") {
        this.PACSshow = true;
      } else {
        this.PACSshow = false;
      }
      if (this.size == "pathology") {
        this.pathologyshow = true;
      } else {
        this.pathologyshow = false;
      }
      if (this.size == "advice") {
        this.adviceshow = true;
      } else {
        this.adviceshow = false;
      }
      if (this.size == "EMR") {
        this.EMRshow = true;
      } else {
        this.EMRshow = false;
      }
      if (this.size == "synMessage") {
        this.synMessageshow = true;
      } else {
        this.synMessageshow = false;
      }
    },
    returnToPrevious() {
      this.$router.go(-1); //返回上一层
    },
    operation() {
      let obj = {};
      obj.id = this.filter;
      this.$router.push({
        path: "/details",
        query: obj
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.searchContent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  .title {
    font-size: 18px;
    color: #4d4d4d;
    line-height: 50px;
    margin-left: 30px;
  }
  .goToUrl {
    display: flex;
    align-content: center;
    position: absolute;
    right: 100px;
    margin-top: 20px;
    .returnPrevious {
      margin-right: 15px;
      color: #0078b6;
      width: 60px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      cursor: pointer;
      span {
        line-height: 20px;
      }
    }
    .returnPrevious:hover,.operation:hover {
      color: #3fbfff;
    }
    .operation {
      margin-right: 15px;
      color: #0078b6;
      width: 95px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      cursor: pointer;
      span {
        line-height: 20px;
      }
    }
  }
}
</style>

<style>
.searchContent .ant-radio-group {
  margin-left: 30px !important;
}
.searchContent .tab .ant-radio-button-wrapper {
  font-size: 16px !important;
  color: #0078b6 !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  font-size: 16px !important;
  border: 1px solid #0078b6 !important;
  line-height: 40px !important;
}
.searchContent .tab1 .ant-radio-button-wrapper {
  font-size: 16px !important;
  color: #0078b6 !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.5) !important;
  font-size: 16px !important;
  border: 1px solid #2091bd !important;
  line-height: 40px !important;
}
.searchContent .bor.ant-radio-button-wrapper {
  border-left: 0 !important;
}
.searchContent
  .tab
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #0078b6 !important;
  color: #fff !important;
}
.searchContent
  .tab1
  .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
  background: #2091bd !important;
  color: #fff !important;
}
.searchContent .ant-radio-button-wrapper:not(:first-child)::before {
  background: none !important;
}
</style>